<!-- 我的钱包 -->
<template>
	<view class="wallet-wrap">
		<view class="head_box">
			<view class="card-box">
				<view class="card-head u-flex u-row-between">
					<view class="u-flex u-col-center">
						<text class="title">可提现金额（元）</text>
						<u-icon @click="showMoney = !showMoney" :name="showMoney ? 'eye-fill' : 'eye-off'" size="46" color="#fff"></u-icon>
					</view>
					<button class="cu-btn cash-btn" @tap="$Router.push('/pages/user/wallet/withdraw')">提现</button>
				</view>
				<view class="money-num u-m-t-50">{{ showMoney ? userinfo.money || '0.00' : '****' }}</view>
			</view>
		</view>
		<!-- 筛选 -->
		<u-sticky offset-top="0" :enable="true">
			<view class="filter-box u-flex u-row-between">
				<button class="u-reset-button date-btn" @tap="showCalendar = true">
					{{ selDateText }}
					<u-icon class="u-m-l-20" name="arrow-down-fill" size="28" color="#e5e5e5"></u-icon>
				</button>

				<view class="total-box">
					<view class="">收入￥{{ incomeMoney || '0.00' }}</view>
					<view class="">支出￥{{ expendMoney || '0.00' }}</view>
				</view>
			</view>
			<!-- 状态分类 -->
			<view class="u-flex nav-box">
				<view class="state-item u-flex-1 " v-for="(state, index) in statusList" :key="state.value" @tap="onTab(state.value)">
					<text class="state-title" :class="{ 'title-active': stateCurrent === state.value }">{{ state.name }}</text>
					<text class="underline" :class="{ 'underline-active': stateCurrent === state.value }"></text>
				</view>
			</view>
		</u-sticky>
		<!-- 钱包记录 -->
		<view class="wallet-list u-flex" v-for="item in walletLog" :key="item.id">
			<image class="head-img u-m-r-20" :src="item.avatar" mode=""></image>
			<view class="list-content">
				<view class="title-box u-flex u-row-between">
					<text class="title u-ellipsis-1">{{ item.type_name }}{{ item.title ? '-' + item.title : '' }}</text>
					<view class="money">
						<text v-if="item.wallet >= 0" class="add font-OPPOSANS">+{{ item.wallet }}</text>
						<text v-else class="minus font-OPPOSANS">{{ item.wallet }}</text>
					</view>
				</view>
				<text class="time">{{ $u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM') }}</text>
			</view>
		</view>
		<!-- 更多 -->
		<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		<!-- 置空页 -->
		<u-empty v-if="isEmpty" margin-top="300" text="暂无记录" mode="list"></u-empty>
		<!-- 日期选择 -->
		<u-calendar
			v-model="showCalendar"
			ref="uCalendar"
			safeAreaInsetBottom
			mode="range"
			start-text="开始"
			end-text="结束"
			active-bg-color=" #FF6660"
			active-color="#fff"
			range-bg-color="#FFF0E2"
			range-color=" #FF6660"
			:customStyle="{ background: 'linear-gradient(90deg, #FD9559,  #FF6660)', boxShadow: '0 7rpx 11rpx 2rpx rgba(#FD9559, 0.5)' }"
			@change="selDate"
		></u-calendar>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {},
	data() {
		return {
			isEmpty: false,
			stateCurrent: 'all', //默认
			statusList: [
				{
					name: '全部',
					value: 'all'
				},
				{
					name: '收入',
					value: 'add'
				},
				{
					name: '支出',
					value: 'reduce'
				}
			],
			showMoney: true,
			//日期选择
			showCalendar: false,
			selDateText: '',
			walletLog: [], //钱包记录
			propsDate: '', //日期参数
			incomeMoney: '', //收入
			expendMoney: '', //支出
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1
		};
	},
	computed: {
		...mapState({
			userinfo: ({ user }) => user.userInfo
		})
	},
	onShow() {
		this.getToday();
		this.currentPage = 1;
		this.lastPage = 1;
		this.walletLog = [];
		this.getWalletLog();
	},
	// 触底加载更多
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getWalletLog();
		}
	},
	methods: {
		//  今日
		getToday() {
			let now = new Date();
			let dateText = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()}`;
			this.selDateText = `${now.getFullYear()}.${now.getMonth() + 1}.${now.getDate()}`;
			this.propsDate = `${dateText}-${dateText}`;
		},
		// tab切换
		onTab(state) {
			if (this.stateCurrent !== state) {
				this.stateCurrent = state;
				this.currentPage = 1;
				this.lastPage = 1;
				this.walletLog = [];
				this.getWalletLog();
			}
		},
		// 日期选择
		selDate(e) {
			this.walletLog = [];
			this.currentPage = 1;
			this.lastPage = 1;
			this.selDateText = `${e.startYear}.${e.startMonth}.${e.startDay}-${e.endYear}.${e.endMonth}.${e.endDay}`;
			let dateText = `${e.startYear}/${e.startMonth}/${e.startDay}-${e.endYear}/${e.endMonth}/${e.endDay}`;
			this.propsDate = dateText;
			this.getWalletLog();
			this.$refs.uCalendar.init();
		},
		// 钱包明细
		getWalletLog() {
			let that = this;
			that.loadStatus = 'loading';
			that.$api('money.walletLog', {
				wallet_type: 'money',
				status: that.stateCurrent,
				date: that.propsDate,
				page: that.currentPage
			}).then(res => {
				if (res.code === 1) {
					that.walletLog = [...that.walletLog, ...res.data.wallet_logs.data];
					that.incomeMoney = res.data.income;
					that.expendMoney = Math.abs(res.data.expend);
					that.isEmpty = !that.walletLog.length;
					that.lastPage = res.data.wallet_logs.last_page;
					that.loadStatus = that.currentPage < res.data.wallet_logs.last_page ? 'loadmore' : 'nomore';
				}
			});
		}
	}
};
</script>

<style lang="scss">
// 资产卡片
.head_box {
	width: 750rpx;
	height: 360rpx;
	position: relative;
	background: url($IMG_URL+'/user/qz_wallet_bg.png') no-repeat;
	background-size: 100% auto;
	.card-box {
		width: 710rpx;
		height: 298rpx;
		padding: 40rpx 30rpx;
		border-radius: 30rpx;
		box-shadow: 0 0 10rpx rgba(#fff, 1) inset, 0 0 10rpx rgba(#d39f48, 0.26);
		background-color: rgba(#fff, 0.2);
		overflow: hidden;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
		z-index: 6;
		.card-head {
			width: 100%;
			.cash-btn {
				width: 170rpx;
				height: 64rpx;
				background: #fff;
				border-radius: 32rpx;
				padding: 0;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ff3000;
			}

			.title {
				font-size: 30rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #fff;
				line-height: 30rpx;
			}
		}

		.money-num {
			font-size: 70rpx;
			font-family: FZHei-B01S;
			font-weight: 400;
			color: #fff;
			line-height: 72rpx;
		}
	}
}
// 钱包记录
.wallet-list {
	width: 750rpx;
	padding: 30rpx;
	background-color: #ffff;
	border-bottom: 1rpx solid #eeeeee;
	.head-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		background: #ccc;
	}

	.list-content {
		justify-content: space-between;
		align-items: flex-start;
		flex: 1;
		.title {
			font-size: 28rpx;
			color: #333;
			width: 400rpx;
		}
		.time {
			color: #c0c0c0;
			font-size: 22rpx;
		}
	}
	.money {
		font-size: 28rpx;
		font-weight: bold;
		.add {
			color: #7063d2;
		}

		.minus {
			color: #333333;
		}
	}
}
// 筛选

.filter-box {
	height: 120rpx;
	padding: 0 30rpx;
	width: 750rpx;
	background-color: #f6f6f6;
	.date-btn {
		background-color: #fff;
		line-height: 54rpx;
		border-radius: 27rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}
	.total-box {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}
}
// 分类
.state-item {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-bottom: 1rpx solid rgba(#999, 0.5);
	.state-title {
		color: #666;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 90rpx;
	}
	.title-active {
		color: #333;
	}
	.underline {
		display: block;
		width: 68rpx;
		height: 4rpx;
		background: #fff;
		border-radius: 2rpx;
	}
	.underline-active {
		background: #ff6660;
		display: block;
		width: 68rpx;
		height: 4rpx;
		border-radius: 2rpx;
	}
}
</style>
